<template>
  <div>
    <el-table
      ref="table"
      :data="tableData"
      :row-style="{ height: 0 + 'px' }"
      :cell-style="{ padding: 3 + 'px','text-align':'center' }"
      :header-cell-style="{'text-align':'center'}"
      style="width: 100%; overflow: auto"
      :height="tableHeight"
    >
      <el-table-column
        prop="examinationId"
        label="序号"
        sortable
        width="80"
      ></el-table-column>
      <el-table-column
        prop="examinationName"
        :label="title"
      ></el-table-column>
      <el-table-column
        prop="equipment"
        label="设备类型"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.equipment == 0">低压排故实训装置</span>
          <span v-else-if="scope.row.equipment == 1">高低压设备</span>
          <span v-else>常规考试设备</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="roomId"
        :label="title2"
        width="120"
      ></el-table-column>
      <el-table-column
        prop="startTime"
        label="开始时间"
        :show-overflow-tooltip="true"
      ></el-table-column>
      <el-table-column
        prop="endTime"
        label="结束时间"
        :show-overflow-tooltip="true"
      ></el-table-column>

      <el-table-column
        prop="usersId"
        label="监考老师"
        width="120"
      >
        {{ $store.state.users.userName }}
      </el-table-column>

      <!-- <el-table-column
        prop="candidateSeat"
        label="考生信息"
        width="120"
      >
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click="orderClick(scope.row.examinationId)"
          >
            查看
          </el-button>
        </template>
      </el-table-column> -->
      <el-table-column
        fixed="right"
        label="操作"
        width="210"
      >
        <template slot-scope="scope">
          <el-button
            v-show="!$store.state.pxswitch"
            type="primary"
            size="small"
            @click="orderClick(scope.row.examinationId)"
          >
            <i class="el-icon-document"></i> 查看座次
          </el-button>
          <el-button
            type="danger"
            size="small"
            @click="deleteClick(scope.row.examinationId)"
          >
            <i class="el-icon-delete"></i> 删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      v-dialogDrag
      title="机位分配"
      :visible.sync="isOrder"
    >
      <div class="ordertable">
        <!-- <h1>机位分配</h1> 
        <span
          class="closewin"
          @click="isOrder = false"
        >X</span>-->
        <table
          border="0"
          width="100%"
        >
          <thead>
            <tr>
              <th width="18%">
                实训机号
              </th>
              <th>姓名</th>
              <th v-show="dd >= 3">
                第二批
              </th>
              <th v-show="dd >= 4">
                第三批
              </th>
              <th v-show="dd >= 5">
                第四批
              </th>
            </tr>
          </thead>
          <tbody>
            <tr
              v-for="(item, index) in orderData"
              :key="index"
            >
              <td
                v-for="(iid, ind) in item"
                :key="ind"
              >
                {{ iid }}
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </el-dialog>

    <el-pagination
      v-show="total > 10"
      :current-page="currentPage"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="limit"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    >
    </el-pagination>
  </div>
</template>

<script>
import { ordermsg, queryinfor, deleteExam } from "@/api";

export default {
  props: {
    examType:{
      type:[Number,String],
      default:1,
    }
  },
  data() {
    return {
      isOrder: false, //座次信息显示/隐藏
      orderData: [],
      dd: "",
      tableHeight: 200,
      tableData: [],
      total: 0,
      limit: 10,
      // title:"培训名称",
      // examType:1,//0 培训 1 考试
      currentPage: 1, // 当前页
      querySeinfor: function (
        inv = localStorage.getItem('usersId'),
        page = this.currentPage,
        limit = this.limit,
        examType= this.examType
      ) {
        queryinfor({
          usersId: inv,
          page,
          limit,
          examType
        })
          .then((res) => {
            this.tableData = res.data;
            this.total = res.count;
          })
          .catch((err) => {
            console.log(err);
          });
      },
    };
  },
  computed: {
    title:function(){
      if(this.examType ==0){
        return "培训名称"
      }else{
        return "考试名称"
      }
    },
    title2:function(){
      if(this.examType ==0){
        return "培训地点"
      }else{
        return "考试地点"
      }
    },
  },
  mounted() {
   
      setTimeout(() => {
        this.tableHeight =
          window.innerHeight - this.$refs.table.$el.offsetTop - 55;
          this.limit = Math.floor(this.tableHeight / 41) 
           this.querySeinfor()
      }, 100);
  },
  methods: {
    handleSizeChange(val) {
      this.limit = val;
      this.querySeinfor();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.querySeinfor();
    },
    orderClick(order) {
      ordermsg({
        examinationId: order,
      })
        .then((res) => {
          if (res.result_code == 200) {
              this.orderData = res.data;
            this.isOrder = true;
            this.dd = res.data[0].length;
          }
        
        })
        .catch((err) => {
          console.log(err);
        });
    },
    deleteClick(val) {
      this.$confirm("此操作将永久删除该考试, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deleteExam({
            examinationId: val,
            usersId: localStorage.getItem('usersId'),
          })
            .then((res) => {
              // console.log(res);
              if (res.result_code == 200) {
                this.querySeinfor();
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
              } else {
                this.$message.error("删除失败");
              }
            })
            .catch((err) => {
              console.log(err);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });

      // deleteExam({}).then(res =>{
      //   console.log(res);
      // })
    },
  },
};
</script>
<style lang="scss" scoped>
.ordertable {
  width: 100%;
  background: #fff;
  h1 {
    padding: 10px 0;
    background: #006568;
    color: white;
  }
  table {
    box-sizing: border-box;
    border: 1px solid #eee;
    padding: 5px;
    tr {
      line-height: 35px;
      border-bottom: 1px solid #666;
    }
    td {
      border: none;
    }
    tbody tr:nth-child(odd) {
      background: #f0f0f0;
    }
  }
}
</style>
